
<template>
  <div class="map-container">
    <div class="map-info">
      <span>Center: {{ center }}</span>
      <span>Zoom: {{ zoom }}</span>
      <span>Bounds: {{ bounds }}</span>
    </div>
    <l-map
      ref="map"
      class="map"
      :zoom="zoom"
      :center="center"
      @update:zoom="zoomUpdated"
      @update:center="centerUpdated"
      @update:bounds="boundsUpdated"
    >
      <!-- 瓦片图 -->
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>

      <!-- 自定义control内容 -->
      <l-control position="topright">
        <div style="background:white;">
          <el-button-group>
            <el-button type="primary" icon="el-icon-edit" @click="clickHandler"></el-button>
            <el-button type="primary" icon="el-icon-share" @click="clickHandler"></el-button>
            <el-button type="primary" icon="el-icon-delete" @click="clickHandler"></el-button>
          </el-button-group>
          <br>
          <ve-line :data="chartData" style="width:400px;background:white;"></ve-line>
        </div>
      </l-control>

      <!-- 自定义文本 -->
      <l-control-attribution position="bottomleft" prefix="A custom context"></l-control-attribution>
      <!-- 比例尺 -->
      <l-control-scale position="bottomleft" :imperial="false" :metric="true"></l-control-scale>
    </l-map>

        <sider ref="sider" :is-open="show" title="搜索条件">
            <el-form class="search-content" label-position="top" :model="form" label-width="80px">
            <el-form-item label="活动名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" >立即创建</el-button>
            </el-form-item>
          </el-form>
        </sider>
  </div> 
</template>


<script>
import {
  LMap,
  LTileLayer,
  LControl,
  LControlLayers,
  LControlAttribution,
  LControlScale,
  LControlZoom
} from 'vue2-leaflet'
import animate from 'animate.css'
import Sider from './components/Sider'

export default {
  name: 'MapControl',
  data() {
    return {
      url:'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
      attribution: '&copy; Lenovo contributors',
      zoom: 8,
      center: [39.907103, 116.396885],
      bounds: null,
      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      },
      show:false,
       form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
    }
  },
  beforeDestroy(){
      this.$refs.map.mapObject.remove();
  },
  components: {
    LMap,
    LTileLayer,
    LControl,
    LControlLayers,
    LControlAttribution,
    LControlScale,
    LControlZoom,
    Sider
  },
  methods: {
    zoomUpdated(zoom) {
      this.zoom = zoom
    },
    centerUpdated(center) {
      this.center = center
    },
    boundsUpdated(bounds) {
      this.bounds = bounds
    },
    clickHandler() {
      this.$refs.sider.open();
      // this.$message({
      //   message: '恭喜你，这是一条成功消息',
      //   type: 'success'
      // })
    }
  }
}
</script>

<style scoped>
</style>

